<!--发布房源-->
<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { message } from 'ant-design-vue';
import {useRouter} from "vue-router";

const current = ref(1);
const total = ref(0);
const pageSize = ref(10);
const houseList = ref([]);
const token = localStorage.getItem("access-token");
const router = useRouter();

//获取发布信息
const getCollections = async () => {
  try {
    const response = await axios.get(`${window.link}/landlord/release`, {
      headers: {
        "access-token": token
      },
      params: {
        current: current.value,
        size: pageSize.value
      }
    });

    if (response.data.code === 200) {
      console.log(response);
      houseList.value = response.data.data.records;
      total.value = response.data.data.total;
    } else {
      message.error("获取发布列表失败");
    }
  } catch (error) {
    console.error("获取发布列表失败", error);
    message.error("获取发布列表失败");
  }
};

// 分页改变
const onChange = async (page, size) => {
  current.value = page;
  pageSize.value = size;
  await getCollections();
};

// 页码改变
const onShowSizeChange = async (page, size) => {
  current.value = page;
  pageSize.value = size;
  await getCollections();
};

// 组件挂载时获取数据
onMounted(() => {
  getCollections();
});

const handleHouseClick = (id) => {
  sessionStorage.setItem("houseId", id);
  router.push("/house");
};

//删除房源
const cancelCollection = async (id)=>{
  try {
    const response =  await axios.delete(`${window.link}/landlord/release/${id}`,{
      headers: {
        "access-token": token
      }
    })
    if(response.data.code === 200){
      message.success("取消发布成功");
      getCollections();
    }else{
      message.error(response.data.message);
    }
  } catch (error) {
    message.error("发布房源失败");
  }

}
const videoExtensions = ['mp4', 'webm', 'ogg']
const isVideo = (url) => {
  const extension = url.split('.').pop().toLowerCase()
  return videoExtensions.includes(extension)
}
</script>
<template>
  <div class="min-h-screen  bg-gray-50">
    <div class="w-[1400px] mx-auto py-8 px-4">
      <div class="bg-white rounded-lg shadow-sm p-6">
        <!-- 标题 -->
        <h1 class="text-xl font-medium mb-6">我发布的房源</h1>
        <!-- 房源列表 -->
        <div class="space-y-4">
          <div v-for="item in houseList" :key="item.id" 
               class="flex bg-white border rounded-lg p-4 hover:shadow-md transition-shadow">
            <!-- 图片部分 -->
            <div class="w-48 h-32 overflow-hidden rounded-lg mr-4">
              <img v-if="!isVideo(item.graphUrl)" :src="item.graphUrl" class="w-full h-full object-cover"/>
              <video v-else :src="item.graphUrl" class="w-full h-full object-cover"/>
            </div>
            <!-- 信息部分 -->
            <div class="flex-1">
              <h3 class="text-lg font-medium mb-2 hover:text-blue-300 cursor-pointer" @click="handleHouseClick(item.id)">{{ item.title }}</h3>
              <div class="text-sm text-gray-500 mb-2">
                {{ item.district }} · {{ item.layout }} · {{ item.area }}㎡
              </div>
              <div class="flex justify-between items-center mt-4">
                <span class="text-orange-500 text-lg font-medium">{{ item.rent }}元/月</span>
                <div class="space-x-4">
                  <a-button 
                    type="link" 
                    class="!rounded-button"
                    @click="cancelCollection(item.id)"
                  >
                    取消发布
                  </a-button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 分页 -->
        <div class="flex justify-between items-center mt-6">
          <span class="text-gray-500">共 {{ total }} 条</span>
          <a-pagination
              v-model:current="current"
              :total="total"
              :pageSize="pageSize"
              show-size-changer
              @change="onChange"
              @showSizeChange="onShowSizeChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>


<style scoped>
.ant-tag {
  border: none;
  padding: 2px 12px;
  border-radius: 4px;
}
</style>
